<template>
  <div>
    <!--    头部-->
    <el-menu id="el-menu"
             :default-active="activeIndex2"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item >社团管理系统后台</el-menu-item>
      <el-menu-item style="float: right;margin-right: 20px"><a class="router-link-active" href="#" @click.prevent="toLogout">退出登录</a></el-menu-item>
      <el-menu-item style="float: right;margin-right: 20px">{{this.name}},你好</el-menu-item>

    </el-menu>
    <!--    侧边栏-->
    <el-col :span="4" id="el-col">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span>社团管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><router-link class="router-link-active" to="/mainCom/personList">人员列表</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link class="router-link-active" to="/mainCom/clubInfo">社团信息</router-link></el-menu-item>
            <el-menu-item index="1-3"><router-link class="router-link-active" to="/mainCom/applicant">申请列表</router-link></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>新闻管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"><router-link to="/mainCom/articleList" class="router-link-active">新闻列表</router-link></el-menu-item>
            <el-menu-item index="2-2"><router-link to="/mainCom/articleAdd" class="router-link-active">添加新闻</router-link></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-wind-power"></i>
            <span>活动管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1"><router-link to="/mainCom/activityList" class="router-link-active">活动列表</router-link></el-menu-item>
            <el-menu-item index="3-2"><router-link to="/mainCom/activityAdd" class="router-link-active">添加活动</router-link></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>

    <!--    内容区域-->
    <div id="content">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import {logout} from '@/api'
export default {
  name: "MainCom",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      name:'',
      cid: 0,
    };
  },
  methods: {
    toLogout(){
      sessionStorage.clear();
      logout();
      this.$router.push("/login");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.name = sessionStorage.getItem('name');
    this.cid = sessionStorage.getItem('cid');
  }
}
</script>

<style scoped>
#el-menu{
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

#el-col{
  height: 100%;
  width: 205px;
  position: fixed;
  z-index: 1;
  top: 60px;
  left: -40px;
  overflow-x: hidden;
  background-color: rgb(84, 92, 100);;
}
#content{
  width: 1200px;
  position: fixed;
  top: 75px;
  left: 175px;
}

.router-link-active {
  text-decoration: none;
  color: white;
  margin-left: 20px;
}

</style>
